<!-- 登录页面 -->
<template>
  <div class="container">
    <uni-nav-bar
      class="nav-bar"
      fixed="true"
      title="登录"
      status-bar="true"
      :border="false"
      left-icon="left"
      @clickLeft="back"
    />
    <div class="logo">
      <image
        class="logo-img"
        src="https://ustatic.hudongmiao.com/joymew-host-contest/common-logo.svg"
      />
    </div>
    <div class="login-btn">
      <!-- XXX 这里暂时使用遮罩来控制不同意协议时无法点击登录按钮，后续可以考虑使用button的disable属性来控制 -->
      <div
        v-show="!isAgree"
        class="mask"
        @click="clickWhenDisagree"
      />
      <button
        class="btn"
        open-type="getPhoneNumber"
        @getphonenumber="getPhoneNumber"
      >
        手机号快捷登录
      </button>
    </div>
    <!-- 同意用户协议 -->
    <div class="agree">
      <checkbox-group @change="checkboxChangeHandle">
        <checkbox
          class="agree-checkbox"
          color="#FF2459"
          value="agree"
          :checked="isAgree"
        />
      </checkbox-group>
      <div class="agree-text">
        同意
        <text
          class="tip-link"
          @click="navigateTo('user-service-agreement')"
        >
          《嗨喵主持人用户服务协议》
        </text>和
        <text
          class="tip-link"
          @click="navigateTo('privacy-policy')"
        >
          《嗨喵主持人隐私政策》
        </text>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reqRecordInvite } from '@/api/activity-202310-api';
import { useUser } from '@/stores/user';
import { back, navigateTo } from '@/utils/navigate';
import { showToast } from '@/utils/tools';

const user = useUser();

const isAgree = ref<boolean>(false);
const checkboxChangeHandle = (e: any) => {
  isAgree.value = e.detail.value.includes('agree');
};

/**
 * 点击了不同意用户协议
 */
const clickWhenDisagree = () => {
  uni.showModal({
    content: '登录即表示同意嗨喵用户服务协议和隐私政策是否继续？',
    success: async (res) => {
      if (res.confirm) {
        isAgree.value = true;
      }
    },
  });
};

/** 登录成功回调 */
const loginSuccess = async () => {
  uni.switchTab({ url: '/pages/index' });
  showToast('登录成功');

  // 2023年十月活动邀请好友逻辑
  const inviteKey = uni.getStorageSync('inviteKey');
  if (!inviteKey) return;
  const inviteRes = await reqRecordInvite(inviteKey);
  if (inviteRes.data.code === 200) {
    uni.removeStorageSync('inviteKey');
  }
};

const { getToken, getInfo } = user;
/**
 * 获取到个人手机号的回调，使用返回的code，获取token，然后获取个人信息
 * @param {Object} e
 */
const getPhoneNumber = (e: any) => {
  // 如果用户拒绝授权，直接返回
  if (!e?.detail?.code) return;
  console.log('获取到个人手机号的回调', e);
  const code = e?.detail?.code;
  getToken(code)
    .then(async (res) => {
      await getInfo();
    })
    .then(() => {
      console.log('登录成功');
      loginSuccess();
    })
    .catch((err) => {
      console.log('登录失败', err);
      // 如果err是'token为0',说明是新用户，则跳转到注册页面
      if (err === 'token为0') {
        uni.navigateTo({ url: '/subpkg/register/register' });
        return;
      }
      uni.showToast({
        title: '登录失败，请重试',
        icon: 'none',
      });
    });
};
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;

  display: grid;
  grid-template:
    'nav-bar' auto
    'logo' 1fr
    'login-btn' 42px
    'agree' 1fr
    / 1fr;
  grid-gap: 15px;
  align-items: center;
  justify-items: center;

  .nav-bar {
    grid-area: nav-bar;
  }

  .logo {
    grid-area: logo;

    position: relative;

    width: 100px;
    height: 100px;
    overflow: hidden;

    border-radius: 50%;

    .logo-img {
      position: absolute;
      top: 0;
      left: 0;

      width: 100%;
      height: 100%;
    }

  }

  .login-btn {
    grid-area: login-btn;

    position: relative;

    width: 342px;
    height: 42px;

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;

      width: 100%;
      height: 100%;

      // background: #fff;
      border-radius: 4px;
      opacity: 1;
    }

    .btn {
      width: 100%;
      height: 100%;

      background: #ff2459;
      border-radius: 4px;

      font-size: 16px;
      line-height: 42px;
      color: #fff;
      text-align: center;
    }
  }

  .agree {
    grid-area: agree;
    align-self: self-start;

    display: flex;
    justify-content: center;

    // align-items: center;

    .agree-checkbox {
      margin-right: 10px;

      transform: scale(.7);
    }

    .agree-text {
      width: 70%;

      font-size: 12px;
      line-height: 20px;
      color: #999;

      .tip-link {
        color: #ff2459;
      }
    }
  }
}
</style>
